import React,{ Component } from 'react';
import './labelTool.scss';
import '../../index/index.scss';
import { 
	Link
} from 'react-router-dom';
import { message } from 'antd';
import { singleSignInfo, editOrAddSign } from 'api/client.js';
export default class LabelTool extends Component{
	constructor (props) {
		super(props)
		this.state={
			labelToolList: {},
			labelToolUser: [],
			labelTitle: ''
		}
	}
	goBack () {
		this.props.history.goBack()
	}
	_singleSignInfo (id) { //单个标签信息及成员获取
		singleSignInfo({
			sign_id: id
		}).then(res => {
			if(res.code === 1){
				this.setState({
					labelToolList: res.data,
					labelToolUser: res.data.users
				},()=>{
					this.setState({
						labelTitle: this.state.labelToolList.sign_name
					})
				})
			}
		})
	}
	_editOrAddSign () { //编辑添加标签
		editOrAddSign({
			employee_id:10000,
			group_id: this.state.labelToolList.group_id,
			sign_name: this.state.labelTitle,
			sign_id: this.state.labelToolList.sign_id
		}).then(res => {
			if(res.code === 1){
				message.success(res.message, 3 ,this.props.history.push(`${window.baseUrl}/client/label`))
			} else {
				message.error(res.message,3)
			}
		})
	}
	handChange (e) {
		this.setState({
			labelTitle: e.target.value
		})
	}
	componentDidMount(){
		document.title = '标签管理';
		this._singleSignInfo(this.props.location.state.sign_id)
		
	}
	render () {
		return(
			<div className="labelTool">
				{/*<div className="title">
					<div onClick={this.goBack.bind(this)}><i className="glyphicon glyphicon-left"></i></div>
					<div>标签管理</div>
					<div className="labelTool_true" onClick={this._editOrAddSign.bind(this)}>确定</div>
				</div>*/}
				<div className="labelTool_title">
					标签名称
				</div>
				<div className="labelTool_class">
					<input type="text" onChange={this.handChange.bind(this)} value={this.state.labelTitle}/>
				</div>
				<div className="labelTool_title">
					选择分类：<span className="labelTool_news">{this.state.labelToolList.group_name}</span>
				</div>
				<div className="labelTool_title1">
					<div>
						标签成员({this.state.labelToolUser.length})
					</div>
					<div><Link to={
						{
							pathname: `${window.baseUrl}/client/labeltool/changeClient`,
							state: {
								sign_id: this.state.labelToolList.sign_id
							}
						}
					}>
						<i className="glyphicon glyphicon-add"></i>添加成员</Link>
					</div>
				</div>
				<div className="labelTool_content">
					<ul className="labelTool_list">
					{
						this.state.labelToolUser.map((item,index) => {
							return(
								<Link to={
									{
										pathname: `${window.baseUrl}/clinetDetails`,
										state: {
											account_user_id: item.account_user_id
										}
									}
								} key={index}>
								<li>
									<img src={item.employee_img} className="labelTool_img"  alt="lalal"/><br/>
									<span>{item.account_user_name}</span>
								</li>
								</Link>
							)
						})
					}
					</ul>
				</div>
				<div className="label_button" onClick={this._editOrAddSign.bind(this)}>
					确定
				</div>
			</div>
		)
	}
}